<template>
	<view class="content">
		<view class="top">
			<text class="top-text1">
				欢迎回家
			</text>				
		
			<text class="top-text2">
				Welcome home
			</text>				
		</view>
		<image src="../../static/images/nav-page-circles.png" mode="" class="circles"></image>
		<image src="../../static/images/nav-page-home.png" mode="" class="home"></image>
		
		<view class="bottom">
			<text class="bottom-text1">
				我的管家
			</text>
			<text class="bottom-text2">
				智能养猪现在开启
			</text>	
			
			
		</view>
		<button class="begin">现在开启</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped>
	.top{
		display: flex;
		flex-direction:column;
		position: absolute;
		top: 6%;
		left: 10%;
	}
	.top text{
		color: #FFFFFF;
	}
	.top-text1{
		font-size: 40px;
	}
	.top-text2{
		font-size: 22px;
	}
		
	.content{
		background: linear-gradient(to right, #1d6efb , #42beff);
	}
	.circles{
		width: 170px;
		height:80px;
		position: absolute;
		top: 26%;
		left: 26%;
	}
	.home{
		width: 80px;
		height:80px;
		position: absolute;
		top: 41%;
		left: 43%;
	}
	
	.bottom{
		display: flex;
		flex-direction:column;
		position: absolute;
		top: 56%;
		left: 36%;		
	}
	.bottom text{
		color: #FFFFFF;
	}
	.bottom-text1{
		font-size: 25px;
		text-align: center;
	}
	.begin{
		width: 80%;
		background: #FFFFFF;
		position: absolute;
		top: 72%;
		left: 12%;	
		color: #3283fd;
	}
</style>
